<template>
	<view class="container">
		<!--header-->
		<view class="tui-header-box" :style="{ height: height + 'px', background: 'rgba(255,255,255,' + opcity + ')' }">
			
			<view class="tui-header-icon" :style="{ marginTop: top + 'px' }">
				<view class="tui-icon-box" :style="{ backgroundColor: 'rgba(0, 0, 0,' + iconOpcity + ')' }" @tap="back">
					<tui-icon name="arrowleft" :size="30" :color="opcity >= 1 ? '#000' : '#fff'"></tui-icon>
				</view>
		
				<image src="http://img2.woyaogexing.com/2022/01/12/f5a7b609f77e4d47b20bc011aa7dcacc!400x400.jpeg" class="tui-avatar"></image>
		
				<view class="tui-nickname" :style="{ opacity: opcity }">昵称昵称昵称昵称</view>
			</view>
		</view>
		<!--header-->
		<!-- 内容 -->
		<view :style="[bannerwapper]">
			<swiper
				class="banner"
				indicator-dots="true"
				indicator-color="#e0e0e0"
				indicator-active-color="#fff"
				autoplay="true"
				interval="3000"
				duration="1000"
				
			>
				<swiper-item v-for="(item, i) in banner" :key="i"><image :src="item.picUrl" background-size="cover" mode="aspectFit"></image></swiper-item>
			</swiper>
		</view>
		<view class="contant">
			<text class="title">测试标题</text>
			<text class="main-info">
				详细信息详细信息详细信息详细信息详细信息详细信息详细信息详细信息详细信息详细信息详细信息详细信息详细信息详细信息详细信息详细信息详细信息详细信息详细信息详细信息详细信息详细信息详细信息详细信息详细信息详细信息详细信息详细信息详细信息详细信息详细信息详细信息详细信息详细信息详细信息详细信息详细信息详细信息详细信息详细信息详细信息详细信息详细信息详细信息详细信息详细信息详细信息详细信息详细信息详细信息详细信息详细信息详细信息详细信息详细信息详细信息详细信息详细信息详细信息
			</text>
		</view>
		<view class="comment">
			<Comment :value="1"></Comment>
		</view>
	</view>
</template>

<script>
	import {banner} from './data.js';
	import Comment from './comment/comment.vue'
	export default {
		components: {
			Comment
		},
		data() {
			return {
				banner: banner,
				bannerwapper: {},
				height: 64, //header高度
				top: 26, //标题图标距离顶部距离
				scrollH: 0, //滚动总高度
				opcity: 0,
				iconOpcity: 0.5,
				width: 720
			}
		},
		onLoad: function(options) {
			console.log(options.title);
			let obj = {};
			// #ifdef MP-WEIXIN
			obj = wx.getMenuButtonBoundingClientRect();
			// #endif
			// #ifdef MP-BAIDU
			obj = swan.getMenuButtonBoundingClientRect();
			// #endif
			// #ifdef MP-ALIPAY
			my.hideAddToDesktopMenu();
			// #endif
		
			setTimeout(() => {
				uni.getSystemInfo({
					success: res => {
						
						this.width = res.windowWidth - 30 ;
						this.height = obj.top ? obj.top + obj.height + 8 : res.statusBarHeight + 44;
						this.top = obj.top ? obj.top + (obj.height - 32) / 2 : res.statusBarHeight + 6;
						this.scrollH = res.windowWidth;
						console.log(this.width )
					}
				});
			}, 0);
		},
		created(){
			this.getImgInfo();
		},
		methods: {
			change(){
				this.bannerwapper.height = '350rpx'
			},
			getImgInfo () {
				let _this = this;
				let src =_this.banner[0].picUrl
				
				uni.getImageInfo({src: src}).then(res => {
					let phoneWidth = this.width;
					console.log("phoneWidth:" + phoneWidth)
					let width = res[1]['width'];
					let height = res[1]['height'];
					let bannerHeight = height = phoneWidth*(height/width) + 'px';
					this.bannerwapper = {
						width: phoneWidth + 'px',
						height: bannerHeight
					}
				})
	        },
			back(){
				uni.navigateBack({
				    delta: 1
				});
			}
		},
		onPageScroll(e) {
			let scroll = e.scrollTop <= 0 ? 0 : e.scrollTop;
			let opcity = scroll / this.scrollH;
			if (this.opcity >= 1 && opcity >= 1) {
				return;
			}
			this.opcity = opcity;
			this.iconOpcity = 0.5 * (1 - opcity < 0 ? 0 : 1 - opcity);
		}
	}
</script>

<style lang="scss">
	@import './article-info.css';
	.container {
		width: 100%;
		height: 100%;
	}
</style>
